<template>
  <!-- <banner title="标题" refresh /> refresh 刷新按钮 -->
  <el-row type="flex" justify="space-between">
    <el-col :span="12">
      <div class="title">
        <h4 class="icon">{{ title }}</h4>
      </div>
    </el-col>
    <el-col v-if="refresh" :span="12" class="refresh">
      <el-button type="primary" class="btn-gradient" icon="el-icon-refresh" @click="refreshBtn">刷新</el-button>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'TitleBar',
  props: {
    title: {
      type: String,
      default: '标题'
    },
    refresh: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    title() {
      if (this.title === '') {
        this.title = '请输入标题'
      }
    }
  },
  methods: {
    refreshBtn() {
      window.location.reload();
      this.$message({
          message: '刷新成功!',
          type: 'success'
        });
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  .icon {
    position: relative;
    padding-left: 20px;
    line-height: 1.8em;
  }
  .icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 0px;
    display: block;
    width: 11px;
    height: 20px;
    background: -webkit-gradient(linear, right top, left top, from(#4859ff), to(#488dff));
    background: linear-gradient(-90deg, #4859ff, #488dff);
    border-radius: 4px;
  }
}
.refresh {
  text-align: right;
  margin-top: 15px;
  .btn-gradient {
    background: -webkit-gradient(linear, right top, left top, from(#4859ff), to(#488dff));
    background: linear-gradient(-90deg, #4859ff, #488dff);
    -webkit-box-shadow: 0px 3px 8px 0px rgba(72, 93, 255, 0.5);
    box-shadow: 0px 3px 8px 0px rgba(72, 93, 255, 0.5);
    border-radius: 4px;
  }
}
</style>
